<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模型验证</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link type="text/css" rel="stylesheet" href="plugin/layui/css/layui.css">
    <link type="text/css" rel="stylesheet" href="css/common.css">
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <!--该js引用需要放在所有js之前-->
    <script src="js/resource.js"></script>
</head>
<body>

<section class="layui-section-1">
    <div class="layui-section-title">
        模型验证
    </div>
</section>
<section class="layui-section-2">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>请求参数配置</legend>
    </fieldset>
    <form class="layui-form layui-form-pane" action="" id="requestForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">产品&nbsp;<span style="color:red">*</span></label>
                <div class="layui-input-inline">
                    <select name="productNo" lay-verify="required" lay-search lay-filter="productNo">

                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">场景&nbsp;<span style="color:red">*</span></label>
                <div class="layui-input-inline">
                    <select name="scene" lay-verify="required" lay-search lay-filter="scene">

                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-filter="createAction" lay-submit="createAction">
                    <i class="layui-icon">&#xe620;&nbsp;造&nbsp;数</i></button>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-filter="testAction" lay-submit="testAction">
                    <i class="layui-icon">&#xe615;&nbsp;测&nbsp;试</i>
                </button>
            </div>
        </div>
        <div class="layui-form-item" id="useCaseFormItem" style="display: none;">
            <div class="layui-inline">
                <div class="layui-form-mid layui-word-aux" id="useCase" style="font-size: 15px;"></div>
                <input type="hidden">
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-sm" lay-filter="edit" lay-submit="edit">
                    <i class="layui-icon">&#xe620;&nbsp;编&nbsp;辑</i></button>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请求报文&nbsp;<span style="color:red">*</span></label>
            <div class="layui-input-block">
                <textarea lay-verify="required" name="request" class="layui-textarea" placeholder="请输入请求报文"></textarea>
            </div>
        </div>
    </form>
</section>
<section class="layui-section-2">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>响应报文</legend>
    </fieldset>
    <form class="layui-form layui-form-pane" action="" id="responseForm">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">响应报文</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="response"></textarea>
            </div>
        </div>
        <!--<div class="layui-form-item">-->
        <!--<div class="layui-inline">-->
        <!--<label class="layui-form-label">响应1</label>-->
        <!--<div class="layui-input-block">-->
        <!--<input name="date" class="layui-input" id="date1" type="text" autocomplete="off">-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-inline">-->
        <!--<label class="layui-form-label">响应2</label>-->
        <!--<div class="layui-input-inline">-->
        <!--<input name="number" class="layui-input" type="text" autocomplete="off">-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-inline">-->
        <!--<label class="layui-form-label">响应1</label>-->
        <!--<div class="layui-input-block">-->
        <!--<input name="date" class="layui-input" id="date1" type="text" autocomplete="off">-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-form-item">-->
        <!--<div class="layui-inline">-->
        <!--<label class="layui-form-label">响应1</label>-->
        <!--<div class="layui-input-block">-->
        <!--<input name="date" class="layui-input" id="date1" type="text" autocomplete="off">-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-inline">-->
        <!--<label class="layui-form-label">响应2</label>-->
        <!--<div class="layui-input-inline">-->
        <!--<input name="number" class="layui-input" type="text" autocomplete="off">-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-inline">-->
        <!--<label class="layui-form-label">响应1</label>-->
        <!--<div class="layui-input-block">-->
        <!--<input name="date" class="layui-input" id="date1" type="text" autocomplete="off">-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
    </form>
</section>

<script src="plugin/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: 'js/lib/'
    }).extend({
        common: 'common'
    });
    layui.use(['jquery', 'element', 'common', 'table', 'form', 'laytpl'], function () {
        var form = layui.form;
        $ = layui.jquery,
            laytpl = layui.laytpl,
            common = layui.common,
            editWindow = undefined;
        var funcs = {
            //初始化
            init: function () {
                common.cmsAjax({
                    url: globalParam.getUrl("index", "init"),
                    successFunc: function (res) {
                        //场景
                        var sceneOptions = '<option value=""></option>';
                        for (var i in res.data.scene) {
                            sceneOptions += "<option value='" + res.data.scene[i].sceneCode + "'>" + res.data.scene[i].sceneName + "</option>";
                        }
                        $("#requestForm").find("select[name='scene']").html(sceneOptions);

                        //产品
                        var productOptions = '<option value=""></option>';
                        for (var i in res.data.product) {
                            productOptions += "<option value='" + res.data.product[i].productCode + "'>" + res.data.product[i].productName + "</option>";
                        }
                        $("#requestForm").find("select[name='productNo']").html(productOptions);
                        form.render();
                        funcs.linkageFunc(sceneOptions, productOptions);
                        funcs.sceneDynamicFunc();
                    }
                });
                return this;
            },
            //场景变动
            sceneDynamicFunc: function () {
                form.on('select(scene)', function (sceneData) {
                    funcs.clearReq();
                    funcs.getTemplet(sceneData.value, $("#requestForm").find("select[name='productNo']").val());
                    return false;
                });
                return this;
            },
            //产品联动
            linkageFunc: function (sceneOptions, productOptions) {
                form.on('select(productNo)', function (productNoData) {
                    funcs.clearReq();
                    if (productNoData.value == '') {
                        $("#requestForm").find("select[name='scene']").html(sceneOptions);
                        $("#requestForm").find("select[name='productNo']").html(productOptions);
                        form.render();
                        return false;
                    }
                    common.cmsAjax({
                        url: globalParam.getUrl("index", "getSceneByProductNo"),
                        data: {"productCode": productNoData.value},
                        successFunc: function (sceneRes) {
                            var sceneOptionsDynamic = '<option value=""></option>';
                            for (var i in sceneRes.data) {
                                sceneOptionsDynamic += "<option value='" + sceneRes.data[i].sceneCode + "'>" + sceneRes.data[i].sceneName + "</option>";
                            }
                            $("#requestForm").find("select[name='scene']").html(sceneOptionsDynamic);
                            form.render();
                            return false;
                        }
                    });
                    return false;
                });
                return this;
            },
            //获取模板
            getTemplet: function (scene, productNo) {
                if ($.trim(scene) == '' || $.trim(productNo) == '') {
                    return this;
                }
                common.cmsAjax({
                    url: globalParam.getUrl("index", "getTemplet"),
                    data: {sceneCode: $.trim(scene), productCode: $.trim(productNo)},
                    successFunc: function (sceneRes) {
                        $("#requestForm").find("textarea[name='request']").html(sceneRes.data);
                        form.render();
                        return false;
                    }
                });
                return this;
            },
            clearReq: function () {
                //清空数据
                var useCaseEle = $(document).find("#useCase"),
                    useCaseFormItem = $(document).find("#useCaseFormItem");
                useCaseFormItem.hide('fast', function () {
                    useCaseEle.html('');
                    useCaseEle.next().val("");
                    $("#requestForm").find("textarea[name='request']").html("");
                    $("#responseForm").find("textarea[name='response']").html("");
                    form.render();
                });
            },
            //造数
            createAction: function () {
                form.on('submit(createAction)', function (createData) {
                    common.cmsOpen({content: "create.html"});
                    return false;
                });
                return this;
            },
            //测试
            testAction: function () {
                form.on('submit(testAction)', function (testData) {
                    $("#responseForm").find("textarea[name='response']").html("");
                    if ($("#useCase").next().val() == '') {
                        common.cmsError("请先造数!", "错误");
                        return false;
                    }
                    common.cmsAjax({
                        url: globalParam.getUrl("index", "testAction"),
                        data: {
                            enterParam: $.trim(testData.field.request)
                        },
                        successFunc: function (res) {
                            common.cmsInfo("响应返回成功！", "信息");
                            $("#responseForm").find("textarea[name='response']").html(JSON.stringify(res.data));
                            form.render();
                            return false;
                        }
                    });
                    return false;
                });
                return this;
            },
            //编辑已选中的模型
            editFunc: function () {
                form.on('submit(edit)', function (editData) {
                    var modelId = $.trim($("#useCase").next().val());
                    var modelName = window.encodeURI(window.encodeURI($("#useCase").find("span").text()));
                    if (modelId == '') {
                        return false;
                    }
                    var seqNo = common.uuid(12,7);
                    common.cmsAjax({
                        url: globalParam.getUrl("index", "savaReq"),
                        data: {
                            enterParam: $.trim($("#requestForm").find("textarea[name='request']").html()),
                            seqNo: seqNo
                        },
                        successFunc: function (res) {
                            if (editWindow != undefined) {
                                editWindow.close();
                            }
                            editWindow = window.open("edit.html?modelId=" + modelId + "&modelName=" + modelName+"&seqNo="+seqNo);
                            return false;
                        }
                    });
                    return false;
                });
                return this;
            }
        };
        funcs.init().createAction().editFunc().testAction();


    });
</script>
</body>
</html>